<template>
  <div>
    <el-input :placeholder="title" v-model="currentItem" disabled>
      <el-button slot="append" icon="el-icon-search" @click="show = true"></el-button>
    </el-input>
    <el-dialog :title="title" width="900px" :visible.sync="show" @opened="query" @closed="closedDialog" :close-on-click-modal="false">
      <el-container>
        <el-header style="height: auto;">
          <el-form :inline="true" >
            <el-form-item label="关键字">
              <el-input v-model="keyword" placeholder="关键字" clearable @clear="clearConditions"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" v-on:click="searchData"></el-button>
            </el-form-item>
          </el-form>
        </el-header>
        <el-main style="padding:0;">
          <el-table ref="mainTable" height="100%" :data="dataTable.result" border style="width: 100%;min-height: 350px" highlight-current-row @current-change="selectItemChange">
            <el-table-column prop="name" label="名称" width="150"></el-table-column>
            <el-table-column prop="publisherName" label="发布人" width="200"></el-table-column>
            <el-table-column prop="publishTime" label="发布时间" header-align="center" align="center" width="200" ></el-table-column>
            <el-table-column prop="versionId" label="版本号" width="60"></el-table-column>
            <el-table-column prop="authorName" label="版本提交人" width="200"></el-table-column>
            <el-table-column prop="Comment" label="版本备注" min-width="200"></el-table-column>
          </el-table>
        </el-main>
        <!--底部分页-->
        <el-footer style="height: auto;">
          <el-pagination v-on:current-change="query" :current-page.sync="queryObject.pageIndex" :page-size="queryObject.pageSize" layout="total, prev, pager, next" :total="dataTable.rowCount">
          </el-pagination>
        </el-footer>
      </el-container>

      <div slot="footer">
          <el-button type="primary" @click="accept">确定</el-button>
          <el-button type="info" @click="cancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "pubList",
  model: {
    prop: "value",
    event: "onSelected"
  },
  props: {
    value: {
      type: String,
      default: ""
    },
    title: {
      type: String,
      default: "请选择发布项"
    }
  },
  data() {
    return {
      queryObject: {
        pageIndex: 1,
        pageSize: 20,
        sortFields: {
          PublishTime: true
        },
        parameters: {
          keyword: ""
        },
      },
      dataTable: {
        result: [],
        pageIndex: 1,
        pageSize: 20,
        pageCount: 0,
        rowCount: 0,
      },
      keyword: "",
      selectedItem: null,
      show: false
    };
  },
  watch: {
  },
  computed: {
    currentItem:{
      get(){
        return this.value;
      },
      set(val){
        this.$emit('onSelected', val);
      }
    }
  },
  created() {
  },
  methods: {
    query(){
      this.$service.pub.query({data: this.queryObject}).then(r => {
        if (r.success){
          this.dataTable = r.data;
        }
      });
    },
    searchData() {
      this.queryObject.parameters.keyword = this.keyword;
      this.query();
    },
    clearConditions() {
      if (this.queryObject.parameters.keyword != this.keyword) this.searchData();
    },
    selectItemChange(row){
      this.selectedItem = row;
    },
    accept(){
      this.currentItem = this.selectedItem.name;
      this.show = false;
      this.$emit('onAccept', this.selectedItem);
    },
    cancel(){
      this.show = false;
    },
    closedDialog(){

    }
  }
};
</script>
